<template>
  <div class="main">
    <el-table
      :data="menuList"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" />
      <el-table-column prop="updateTime" label="修改时间" sortable />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            type="primary"
            :disabled="row.level == 4"
            @click="addPerMissios(row)"
          >
            {{ row.level < 3 ? '+添加菜单' : '+添加功能' }}
          </el-button>
          <el-button
            type="warning"
            :disabled="row.level == 1"
            @click="editPermission(row)"
          >
            编辑
          </el-button>
          <el-button
            :disabled="row.level == 1"
            type="danger"
            @click="deletMenu(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加与修改的弹窗 -->
    <el-dialog
      v-model="addDialogVisible"
      :title="addOrUpdate.id ? '修改数据' : '添加数据'"
      width="30%"
    >
      <template #default>
        <el-form :model="addOrUpdate" label-width="100px">
          <el-form-item label="名称">
            <el-input v-model="addOrUpdate.name"></el-input>
          </el-form-item>
          <el-form-item label="权限值">
            <el-input v-model="addOrUpdate.code"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="saveAdd">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
/* 请求接口 */
import {
  reqAllPermissionMenuAPI,
  reqAddOrUpdataMenu,
  reqDeletpermissionAPI,
} from '@/apis/permission/menu/index'
import { onMounted, reactive, ref } from 'vue'
/* 请求接口的TS类型 */
import type {
  permissionInfo,
  resAllPermission,
  permissionData,
} from '@/apis/permission/menu/menuTypes'
import { ElMessage } from 'element-plus'
/* 储存所有的菜单以及按钮表示 */
const menuList = ref<permissionInfo>([])
/* 搜集添加菜单的数据 */
const addOrUpdate = reactive<permissionData>({
  code: '',
  level: 0,
  name: '',
  pid: 0,
})
/* 控制添加与修改数据弹窗 */
const addDialogVisible = ref<boolean>(false)
/* DOM元素已加载完成就获取相应数据 */
onMounted(() => getAllMenuList())
/* 获取全部菜单与按钮的标识数据 */
const getAllMenuList = async () => {
  const { data: res }: resAllPermission = await reqAllPermissionMenuAPI()
  if (res.code != 200) ElMessage.error('获取失败')
  menuList.value = res.data
}
/* 添加菜单 || 添加功能 */
const addPerMissios = (row: permissionData) => {
  /* 将获取到的对象进行清空 */
  Object.assign(addOrUpdate, {
    children: [],
    code: '',
    createTime: '',
    id: '',
    level: 0,
    name: '',
    pid: 0,
    select: false,
    status: null,
    toCode: null,
    type: '',
    updateTime: '',
  })
  /* 收集新增的菜单的level数值 */
  addOrUpdate.level = row.level + 1
  /* 给谁新增子菜单 */
  addOrUpdate.pid = row.id as number
  /* 显示添加弹窗 */
  addDialogVisible.value = true
}
/* 确认添加 */
const saveAdd = async () => {
  /* 发起添加请求 */
  const { data: res }: any = await reqAddOrUpdataMenu(addOrUpdate)
  /* 判断书添加还是修改 */
  if (res.code != 200) {
    ElMessage({
      type: 'error',
      message: addOrUpdate.id ? '修改失败' : '添加失败',
    })
  } else {
    ElMessage({
      type: 'success',
      message: addOrUpdate.id ? '修改成功' : '添加成功',
    })
  }
  /* 重新渲染界面 */
  getAllMenuList()
  /* 关闭弹窗 */
  addDialogVisible.value = false
}
/* 编辑菜单 */
const editPermission = (row: permissionData) => {
  /* 拷贝收集到的数据 */
  Object.assign(addOrUpdate, row)
  addDialogVisible.value = true
}
/* 删除 */
const deletMenu = async (row: permissionData) => {
  const { data: res }: any = await reqDeletpermissionAPI(row.id as number)
  if (res.code != 200) ElMessage.error('删除失败')
  ElMessage.success('删除成功')
  getAllMenuList()
}
</script>

<style></style>
